<template>
  <view class="side-bar">
    <view class="side-item avatarUrl">
      <image :src="videoInfo.data.creator.avatarUrl" mode="" class="avatar"></image>
      <text
        class="iconfont"
        :class="{ 'icon-jiahao3': isAttention }"
        @click.native="isAttention = !isAttention"
      ></text>
    </view>
    <view class="side-item">
      <text
        class="iconfont icon-aixin3"
        :class="{ 'active-color': activeColorRed }"
        @click.native="getFond"
      ></text>
      <text>{{ love | numToW }}</text>
    </view>
    <view class="side-item">
      <text class="iconfont icon-pinglun2"></text>
      <text>{{ videoInfo.data.commentCount | numToW }}</text>
    </view>
    <view class="side-item">
      <text class="iconfont icon-fenxiang"></text>
      <text>分享</text>
    </view>
    <view class="side-item">
      <image
        src="../../../static/image/changpian.jpg"
        mode=""
        class="record"
        :class="{ animate: !isIconfontPlayShow }"
      ></image>
    </view>
  </view>
</template>

<script>
export default {
  name: 'SideBar',
  props: {
    videoInfo: {
      type: Object,
      default() {
        return {}
      }
    },
    isIconfontPlayShow: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      isAttention: true,
      activeColorRed: false,
      love: this.videoInfo.data.praisedCount
    }
  },
  methods: {
    getFond() {
      if (this.activeColorRed) {
        this.love = (this.love >>> 0) - 1
      } else {
        this.love = (this.love >>> 0) + 1
      }
      this.activeColorRed = !this.activeColorRed
    }
  },
  onReady() {
    this.$bus.$on('changeLove', data => {
      if (data === this.videoInfo.data.vid) this.getFond()
    })
  }
}
</script>

<style lang="scss" scoped>
.side-bar {
  height: 620rpx;
  width: 140rpx;
  background: rgba($color: #000000, $alpha: 0);
  position: fixed;
  flex-direction: column;
  display: flex;
  right: 0;
  bottom: 98rpx;
  .avatarUrl {
    justify-content: flex-start !important;
  }
  .side-item {
    flex: 1;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #eee;
    position: relative;

    .iconfont {
      font-size: 44rpx;
    }
    .icon-jiahao3 {
      color: #ffffff;
      font-size: 12px;
      position: absolute;
      top: 55%;
      overflow: hidden;
      border-radius: 50%;
      background-color: #fe2c55;
      border: 8rpx solid #fe2c55;
      border-left: 10rpx solid #fe2c55;
      border-right: 10rpx solid #fe2c55;
    }
    .active-color {
      color: red;
      font-size: 60rpx;
      transition: all 0.6s;
    }
    .avatar {
      height: 80rpx;
      width: 80rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
    }
    .record {
      height: 80rpx;
      width: 80rpx;
      border-radius: 50%;
      border: 4rpx solid #fff;
    }
  }
}
.animate {
  animation: rotated 4s linear infinite;
}
@keyframes rotated {
  100% {
    transform: rotate(360deg);
  }
}
</style>
